<template>
  <div id="earlyStageChengGuoFuShenYj">
    <el-tabs v-model="flag" @tab-click="handleClick">
      <el-tab-pane label="基本信息" name="1"></el-tab-pane>
      <el-tab-pane label="审查流程" name="2"></el-tab-pane>
    </el-tabs>
    <div class="MainBox1" v-show="flag=='2'">
      <optionList :optionListCode="optionListCode" />
    </div>
    <div class="mainBox" v-show="flag=='1'">
      <div class="boxItem">
        <div class="boxItem_title">
          <span class="tit">复审整体情况</span>
        </div>
        <div class="boxItem_content">
          <div class="boxItem_content_row">
            <div class="boxItem_content_row_item">
              <p>复垦点数量：</p>
              <p>{{mainData.reclaimPointNumber}}个</p>
            </div>
            <div class="boxItem_content_row_item">
              <p>复审片块：</p>
              <p>{{mainData.secondAuditLand}}个</p>
            </div>
            <div class="boxItem_content_row_item">
              <p>复审比例：</p>
              <p>{{mainData.extractiveRatio}}%</p>
            </div>
            <div class="boxItem_content_row_item">
              <p>外业核查片块：</p>
              <p>{{mainData.fieldAuditNumber}}个</p>
            </div>
          </div>
        </div>
      </div>
      <div class="boxItem">
        <div class="boxItem_title">
          <span class="tit">复审片块</span>
        </div>
        <div class="boxItem_content" style="padding-top:30px;">
          <el-table
            :header-cell-style="{background:'#f9f9f9',color:'#606266',fontSize:'12px'}"
            v-loading="listLoading"
            :data="mainData.landSecondAuditList"
            element-loading-text="Loading"
            border
            fit
            highlight-current-row
          >
            <el-table-column label="权利人" align="center" width="100">
              <template slot-scope="scope">{{ scope.row.applicantName }}</template>
            </el-table-column>
            <el-table-column label="片块名称" align="center" min-width="150">
              <template slot-scope="scope">{{ scope.row.pkh }}</template>
            </el-table-column>
            <el-table-column class-name="status-col" label="红线面积（㎡）" align="center" width="120">
              <template slot-scope="scope">{{ scope.row.hxmj }}</template>
            </el-table-column>
            <el-table-column align="center" prop="created_at" label="乡镇" width="120">
              <template slot-scope="scope">{{ scope.row.town!=null?scope.row.town.name:''}}</template>
            </el-table-column>
            <el-table-column label="村社" width="100" align="center">
              <template slot-scope="scope">{{ scope.row.village!=null?scope.row.village.name:'' }}</template>
            </el-table-column>
            <el-table-column label="建设用地复垦面积" width="130" align="center">
              <template slot-scope="scope">{{ scope.row.jsydfkmj }}</template>
            </el-table-column>
            <el-table-column label="宅基地面积" width="110" align="center">
              <template slot-scope="scope">{{ scope.row.zjdmj }}</template>
            </el-table-column>
            <el-table-column label="宅基地附属用地面积" width="130" align="center">
              <template slot-scope="scope">{{ scope.row.zjdfsydmj }}</template>
            </el-table-column>
            <el-table-column label="复垦类型" width="100" align="center">
              <template
                slot-scope="scope"
              >{{ scope.row.reclaimTypeDto!=null?scope.row.reclaimTypeDto.name:'' }}</template>
            </el-table-column>
            <!-- <el-table-column label="是否属于二调遗漏复垦点" width="160" align="center">
              <template
                slot-scope="scope"
              >{{ scope.row.isSecondMovingReclaimPointDto!=null?scope.row.isSecondMovingReclaimPointDto.name:'' }}</template>
            </el-table-column>-->
            <el-table-column label="初审规模与送审规模是否一致" width="180" align="center">
              <template
                slot-scope="scope"
              >{{ scope.row.isIdenticalScaleDto!=null?scope.row.isIdenticalScaleDto.name:'' }}</template>
            </el-table-column>
          </el-table>
        </div>
      </div>
      <div class="boxItem">
        <div class="boxItem_title">
          <span class="tit">复审意见</span>
        </div>
        <div class="boxItem_content" style="padding-top:35px;">
          <div class="options" v-if="nowType==1 || nowType==2">
            <p>经办人意见：</p>
            <div class="boxItem_content_row_item_noFlex_textarea">
              <el-input
                type="textarea"
                :rows="3"
                :readonly="isReadonly"
                v-model="shenChaContent"
                placeholder="请输入内容"
              ></el-input>
            </div>
            <el-row class="options_row">
              <el-col :span="8">
                <div class="options_row_title">
                  <p>审查人：</p>
                  <div class="options_row_img">
                    <img :src="$https+shencharen" alt />
                  </div>
                </div>
              </el-col>
              <el-col :span="8">
                <div class="options_row_title">
                  <p>审查时间：</p>
                  <el-date-picker
                    v-model="shenChaTime"
                    type="date"
                    :readonly="isReadonly"
                    value-format="yyyy-MM-dd"
                    placeholder="选择日期时间"
                  ></el-date-picker>
                </div>
              </el-col>
              <el-col :span="8" v-if="!isReadonly">
                <div class="options_row_title">
                  <p>审查状态：</p>
                  <el-select v-model="shenchaStatus" placeholder="请选择">
                    <el-option label="同意" value="APPROVED"></el-option>
                    <el-option label="拒绝" value="REJECTED"></el-option>
                  </el-select>
                </div>
              </el-col>
            </el-row>
            <div class="boxItem_content_row button_box" v-if="nowType==1">
              <el-button
                class="button_box_item"
                @click="submitYj"
                type="primary"
                :loading="isLoading"
              >提交</el-button>
              <el-button class="button_box_item">取消</el-button>
            </div>
          </div>
          <div class="options" v-if="nowType==2">
            <p>负责人意见：</p>
            <div class="boxItem_content_row_item_noFlex_textarea">
              <el-input
                type="textarea"
                :rows="3"
                :readonly="isReadonlySzxywcsfzr"
                v-model="fuzerenContent"
                placeholder="请输入内容"
              ></el-input>
            </div>
            <el-row class="options_row">
              <el-col :span="8">
                <div class="options_row_title">
                  <p>审查人：</p>
                  <div class="options_row_img">
                    <img :src="$https+fuzeren" alt />
                    <!-- <el-input :disabled="true" v-model="fuzeren" suffix placeholder="请输入内容"></el-input> -->
                  </div>
                </div>
              </el-col>
              <el-col :span="8">
                <div class="options_row_title">
                  <p>审查时间：</p>
                  <el-date-picker
                    v-model="fuzerenTime"
                    type="date"
                    :readonly="isReadonlySzxywcsfzr"
                    value-format="yyyy-MM-dd"
                    placeholder="选择日期时间"
                  ></el-date-picker>
                </div>
              </el-col>
              <el-col :span="8" v-if="!isReadonlySzxywcsfzr">
                <div class="options_row_title">
                  <p>审查状态：</p>
                  <el-select v-model="fuzerenStatus" placeholder="请选择">
                    <el-option label="同意" value="APPROVED"></el-option>
                    <el-option label="拒绝" value="REJECTED"></el-option>
                  </el-select>
                </div>
              </el-col>
            </el-row>
            <div class="boxItem_content_row button_box" v-if="isSzxywcsfzrBtn">
              <el-button
                class="button_box_item"
                @click="submitYj"
                type="primary"
                :loading="isLoading"
              >提交</el-button>
              <el-button class="button_box_item">取消</el-button>
            </div>
          </div>
        </div>
      </div>
    </div>

    <el-dialog :close-on-click-modal="false" title="竣工测绘复审意见表" :visible.sync="tableDialog" width="50%">
      <div style="padding:20px">
        <iframe
          frameborder="0"
          name="showHere"
          style="width:100%;min-height:500px;"
          scrolling="auto"
          :src="$https+dataInfo.filePath"
        ></iframe>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="tableDialog = false">取 消</el-button>
        <el-button type="primary" @click="btnOK">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import {
  querySecondAuditProjectWholeInfo,
  saveManagerOpinion,
  saveOfficeHeaderOpinion,
  getProjectLaterSecondOpinion
} from "@/api/jungongcehuiResultFuShen";
import { getTime } from "@/api/getTime";
import { findById } from "@/api/common";
import optionList from "@/components/optionList";
export default {
  components: {
    optionList
  },
  data() {
    return {
      optionListCode: "LaterMappingResultSecondAudit",
      tableDialog: false,
      dataInfo: "",
      value1: "",
      flag: "1",
      listLoading: false,
      list: [{ author: "测试" }, { author: "一哈哈" }],
      fuzerenCehui: "", //测绘负责人
      fuzerenCehuiJishu: "", //测绘技术负责人

      mainData: "", //主要数据
      shenChaType: 1, //审查类型 1:区县中心初审意见 2:区县局初审意见
      shenchaStatus: "", //审查状态
      shencharen: "测试人", //审查人
      shencharenId: 5, //审查人
      shenChaContent: "", //审查内容
      shenChaTime: "", //审查时间
      nowType: 1, //1为区县 2为市中心

      fuzeren: "", //负责人
      fuzerenStatus: "", //负责人状态
      fuzerenContent: "", //负责人意见
      fuzerenTime: "", //负责人审查时间

      isLoading: false,
      isReadonly: false,
      isSzxywcsjbrBtn: false,
      isReadonlySzxywcsfzr: false,
      isSzxywcsfzrBtn: false,
      userIcon: "" //用户签名照
    };
  },
  created() {
    this.getData();
    //
    // if(localStorage.getItem('router')=="LATER_MAPPING_RESULT_SECOND_AUDIT_FIRST_OPINION"){
    //   this.nowType=1
    //   this.isReadonly=false
    // }else{
    //   this.nowType=2
    //   this.isReadonly=true
    // }
    if (
      localStorage.getItem("router") ==
      "LATER_MAPPING_RESULT_SECOND_AUDIT_FIRST_OPINION"
    ) {
      this.nowType = 1;
      this.isReadonly = false;
      if (localStorage.getItem("menusName") == "ROLE_SZXYWCSJBR") {
        this.isReadonly = false;
        this.isSzxywcsjbrBtn = true;
      } else {
        this.isReadonly = true;
        this.isSzxywcsjbrBtn = false;
      }
    } else if (
      localStorage.getItem("router") ==
      "LATER_MAPPING_RESULT_SECOND_AUDIT_SECOND_OPINION"
    ) {
      this.nowType = 2;
      this.isSzxywcsjbrBtn = false;
      this.isReadonly = true;
      this.isReadonlySzxywcsfzr = false;
      this.isSzxywcsfzrBtn = true;
      if (localStorage.getItem("menusName") == "ROLE_SZXYWCSFZR") {
        this.isReadonly = true;
        this.isSzxywcsjbrBtn = false;
        this.isReadonlySzxywcsfzr = false;
        this.isSzxywcsfzrBtn = true;
      } else {
        this.isReadonly = true;
        this.isSzxywcsjbrBtn = false;
        this.isReadonlySzxywcsfzr = true;
        this.isSzxywcsfzrBtn = false;
      }
    } else {
      this.nowType = 2;
      this.isReadonly = true;
      this.isSzxywcsjbrBtn = false;
      this.isReadonlySzxywcsfzr = true;
      this.isSzxywcsfzrBtn = false;
    }

    if (localStorage.getItem("lookStatus") == 2) {
      this.isReadonly = true;
      this.isSzxywcsjbrBtn = false;
      this.isReadonlySzxywcsfzr = true;
      this.isSzxywcsfzrBtn = false;
    }

    this.shenChaTime = getTime();
    this.fuzerenTime = getTime();
    this.getOpionion();
  },
  methods: {
    btnOK() {
      this.$confirm("当前流程办理完成", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消"
      })
        .then(() => {
          this.$router.push({
            path: "/xmss/ywdeal"
          });
        })
        .catch(() => {});
    },
    //切换选项卡
    handleClick(tab, event) {
      console.log(tab, event);
    },
    //获取用户信息
    userInfo() {
      var data = {
        id: localStorage.getItem("userId")
      };
      findById(data).then(res => {
        console.log(res, "用户信息");
        this.userIcon = res.data.signedPhoto;
      });
    },
    getOpionion() {
      let obj = {
        projectId: localStorage.getItem("projectId")
      };
      getProjectLaterSecondOpinion(obj).then(res => {
        this.shencharen =
          res.data.manager != null
            ? res.data.manager.signedPhoto
            : this.$store.state.user.userInfo.signedPhoto;
        this.shenChaContent = res.data.managerCheckOpinion;
        this.shenchaStatus = res.data.managerCheckResult;
        this.shenChaTime =
          res.data.managerCheckDate != null
            ? res.data.managerCheckDate
            : getTime();

        this.fuzeren =
          res.data.officeHeader != null
            ? res.data.officeHeader.signedPhoto
            : this.$store.state.user.userInfo.signedPhoto;
        this.fuzerenContent = res.data.officeHeaderCheckOpinion;
        this.fuzerenStatus = res.data.officeHeaderCheckResult;
        this.fuzerenTime =
          res.data.officeHeaderCheckDate != null
            ? res.data.officeHeaderCheckDate
            : getTime();
      });
    },
    //提交与提交生成
    submitYj() {
      if (this.nowType == 1) {
        //经办人
        var data = {
          projectId: localStorage.getItem("projectId"),
          checkOpinion: this.shenChaContent,
          checkCensorId: localStorage.getItem("userId"),
          checkDate: this.shenChaTime,
          checkResult: this.shenchaStatus
        };
        this.isLoading = true;
        saveManagerOpinion(data)
          .then(res => {
            this.isLoading = false;
            if (res.code == 1000) {
              this.$alert("当前流程办理完成", "提示", {
                confirmButtonText: "确定",
                callback: action => {
                  this.$router.push({
                    path: "/xmss/ywdeal"
                  });
                }
              });
              this.getData();
              this.getOpionion();
              this.$refs.optionList.getProgress();
            }
          })
          .catch(error => {
            this.isLoading = false;
          });
      } else {
        //负责人
        var data = {
          projectId: localStorage.getItem("projectId"),
          checkOpinion: this.fuzerenContent,
          checkCensorId: localStorage.getItem("userId"),
          checkDate: this.fuzerenTime,
          checkResult: this.fuzerenStatus
        };
        this.isLoading = true;
        saveOfficeHeaderOpinion(data)
          .then(res => {
            this.isLoading = false;
            if (res.code == 1000) {
              this.$confirm(
                "当前流程办理完成，是否查看竣工测绘成果复审意见表？",
                "提示",
                {
                  confirmButtonText: "查看",
                  cancelButtonText: "返回",
                  closeOnClickModal: false
                }
              )
                .then(() => {
                  this.$router.push({
                    path: "/jungongcehuiResultFuShen/fileDataindex"
                  });
                })
                .catch(() => {
                  this.$router.push({
                    path: "/xmss/ywdeal"
                  });
                });
              this.getData();
              this.getOpionion();
              this.$refs.optionList.getProgress();
            }
          })
          .catch(() => {
            this.isLoading = false;
          });
      }
    },
    getData() {
      var data = {
        projectId: localStorage.getItem("projectId") * 1
      };
      querySecondAuditProjectWholeInfo(data).then(res => {
        this.mainData = res.data;
      });
    },
    toSeeTable(type) {
      if (type == 1) {
        this.flag = 2;
      }
    }
  }
};
</script>
<style lang="scss" scoped>
#earlyStageChengGuoFuShenYj {
  padding: 30px;
  box-sizing: border-box;
}
.boxItem {
  width: 100%;
  background-color: #fff;
}
.boxItem_title {
  width: 100%;
  background: #f8f8f8;
  height: 50px;
  border: 1px solid #efefef;
  overflow: hidden;
  color: #333;
  font-size: 18px;
  font-weight: bold;
  text-indent: 20px;
  line-height: 50px;
}
.boxItem_content {
  width: 100%;
  border: 1px solid #ebebeb;
  border-top: none;
  padding: 30px;
  padding-top: 0;
  box-sizing: border-box;
}
.boxItem_content_row {
  display: flex;
  align-items: center;
}
.boxItem_content_row_item {
  display: flex;
  align-items: center;
}
.boxItem_content_row_item {
  margin-right: 30px;
}
.boxItem_content_row_item p {
  font-size: 14px;
  line-height: 36px;
}
.boxItem_content_row_item p:first-child {
  color: #444;
  font-weight: bold;
}
.boxItem_content_row_item p:last-child {
  color: #666;
}
.uploadDownLoadBox_item p {
  width: 140px;
}
.button_box {
  margin-top: 30px;
}
.button_box_item {
  margin-right: 10px;
}
.shencharen {
  display: flex;
  align-items: center;
  margin-right: 300px;
}
.shencharen img {
  width: 105px;
  height: 59px;
}
.shencharenTime {
  display: flex;
  align-items: center;
}
.shencharenTime p {
  width: 80px;
}
.boxItem_content_row_shenhe {
  margin: 30px 0;
}
/* .boxItem_content_row_item_noFlex_textarea {
  width: 80%;
} */
.boxItem_content_row_item_noFlex {
  width: 100%;
}
.boxItem_content_row_item_noFlex p {
  font-size: 14px;
  line-height: 36px;
  width: 140px;
  margin-bottom: 5px;
}
#earlyStageChengGuoFuShenYj .table-doc-view {
  border-collapse: collapse;
}
#earlyStageChengGuoFuShenYj .table-doc-view tr,
.table-doc-view td {
  border: 1px solid #ccc;
  padding: 10px 10px;
}
#earlyStageChengGuoFuShenYj .table-doc-view tr,
.table-doc-view td {
  border: 1px solid #ccc;
  padding: 10px 10px;
}
#earlyStageChengGuoFuShenYj .table-doc-view td {
  font-size: 14px;
  color: #444;
  min-height: 30px;
}
#earlyStageChengGuoFuShenYj .table-doc-view .taoc-title {
  text-align: center;
  font-size: 18px;
  font-weight: bold;
}
#earlyStageChengGuoFuShenYj .table-doc-view .taoc-center {
  text-align: center;
}
#earlyStageChengGuoFuShenYj .boxItem_content_row_item_noFlex_textarea {
  width: 90%;
}
#earlyStageChengGuoFuShenYj .shencharen {
  display: flex;
  margin-right: 150px;
}
#earlyStageChengGuoFuShenYj .shencharen img {
  width: 105px;
  height: 59px;
}
#earlyStageChengGuoFuShenYj .shencharenTime {
  display: flex;
  align-items: center;
}
#earlyStageChengGuoFuShenYj .shencharenTime p {
  width: 80px;
}
#earlyStageChengGuoFuShenYj .boxItem_content_row_shenhe {
  margin: 30px 0;
}
#earlyStageChengGuoFuShenYj .tableBoxData_title {
  width: 100%;
  display: block;
  overflow: hidden;
  font-size: 20px;
  font-weight: bold;
  color: #444;
  text-align: center;
  margin-bottom: 10px;
}
.tableBoxData_mainData {
  width: 100%;
  display: flex;
  justify-content: center;
}
.tableBoxData_button_box {
  width: 100%;
  display: flex;
  justify-content: center;
}
.tableBoxData_button_box_item {
  margin: 0px 20px;
  margin-bottom: 20px;
  margin-top: 10px;
}
.options {
  font-size: 13px;
  font-weight: bold;
  color: #444;
  margin-bottom: 20px;
}
.options_row {
  margin-top: 15px;
  display: flex;
  align-items: center;
}
.options_row_title {
  display: flex;
  align-items: center;
}
.options_row_img img {
  width: 105px;
  height: 59px;
  margin-left: 20px;
}
.options_select {
  margin: 10px 0px;
}
</style>
 